import React, { useEffect } from "react";
import { Form, Input, Button, Space, Popconfirm } from "antd";
import styles from "./Pop.module.css";
import { action, checkAddCollection } from "../Collections";
import {
  useAppDispatch,
  useAppSelector,
} from "../../../../../utils/store/hooks";
import {
  cleanCollectionTypeModal,
  updateCollectionTypeModal,
  updateModal,
  updateModalItem,
} from "../../../../../utils/store/collectionSlice";
import TextArea from "antd/es/input/TextArea";
import { useNavigate } from "react-router-dom";
import { keywordApi } from "../../../../../utils/backend/server";

export const Pop = (props: {
  type: action;
  hide: () => void;
  del: () => void;
  showLogin: () => void;
  showRegister: () => void;
  showPassword: () => void;
}) => {
  const chosen = useAppSelector((state) => state.collection).modalInfo;
  const to = useNavigate();
  const collectionTypeModal = useAppSelector(
    (state) => state.collection
  ).collectionTypeModal;
  const dispatch = useAppDispatch();

  useEffect(() => {
    if (
      collectionTypeModal.showModal ||
      collectionTypeModal.belong !== "pop" ||
      collectionTypeModal.id === -1
    )
      return;

    dispatch(
      updateModalItem({
        collectionType: collectionTypeModal,
      })
    );

    dispatch(cleanCollectionTypeModal());
  }, [collectionTypeModal.showModal]);

  return (
    <div>
      <Form
        className={styles.pop}
        name="PopForm"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 16 }}
      >
        <Form.Item label="name" initialValue={chosen.item.keyName}>
          <Input
            onChange={(e) => {
              dispatch(updateModalItem({ keyName: e.target.value }));
            }}
            value={chosen.item.keyName}
            autoFocus
          />
        </Form.Item>
        <Form.Item label="ranks" initialValue={0}>
          <Input
            onChange={(e) => {
              dispatch(updateModalItem({ ranks: Number(e.target.value) }));
            }}
            value={chosen.item.ranks}
          />
        </Form.Item>
        <Form.Item label="category">
          {/* 
         () => props.setShowCategory(true)  */}
          <Button
            onClick={() => {
              dispatch(
                updateCollectionTypeModal({
                  showModal: true,
                  belong: "pop",
                })
              );
            }}
            type="primary"
          >
            {/* type: {collectionTypeModal.typeName || "unset"} */}
            type: {chosen.item.collectionType?.typeName || "unset"}
          </Button>
        </Form.Item>
        <Form.Item label="url" initialValue={chosen.item.url}>
          <TextArea
            rows={4}
            showCount
            onChange={(e) => {
              dispatch(updateModalItem({ url: e.target.value }));
            }}
            value={chosen.item.url}
          />
        </Form.Item>

        <Form.Item label="memo" initialValue={chosen.item.memo}>
          <TextArea
            rows={4}
            showCount
            onChange={(e) => {
              dispatch(updateModalItem({ memo: e.target.value }));
            }}
            value={chosen.item.memo}
          />
        </Form.Item>

        {/* {props.type === "modify" ? (
          <Form.Item label="manage">
            <Space>
              <Button
                type="primary"
                onClick={() => {
                  to("/password?id=" + chosen.item.id);
                }}
                // onClick={async () => {
                //   props.showPassword();
                // }}
              >
                Password
              </Button>
              <Popconfirm
                title="Delete the task"
                description="Are you sure to delete this task?"
                onConfirm={props.del}
                okText="Yes"
                cancelText="No"
              >
                <Button danger type="primary">
                  Delete
                </Button>
              </Popconfirm>
            </Space>
          </Form.Item>
        ) : (
          <></>
        )} */}
        <Form.Item label="manage">
          <Space>
            <Button
              type="primary"
              onClick={async () => {
                if (chosen.item.id === "") {
                  checkAddCollection(chosen.item);
                  const { data: newKeyword } = await keywordApi.addPlaceholder(
                    chosen.item
                  );
                  // dispatch(updateModalItem({ id, isTemp: true }));
                  dispatch(
                    updateModal({
                      ...chosen,
                      type: "modify",
                      item: {
                        ...chosen.item,
                        ...newKeyword,
                        isTemp: true,
                      },
                    })
                  );
                  console.log(chosen.item, "chosen.item", newKeyword.id);
                  to("/password?id=" + newKeyword.id);
                  return;
                }
                to("/password?id=" + chosen.item.id);
              }}
            >
              Password
            </Button>
            {props.type === "modify" ? (
              <Popconfirm
                title="Delete the task"
                description="Are you sure to delete this task?"
                onConfirm={props.del}
                okText="Yes"
                cancelText="No"
              >
                <Button danger type="primary">
                  Delete
                </Button>
              </Popconfirm>
            ) : (
              <></>
            )}
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};
